<template>
  <div class="container">
    <nav-bar title="足迹" />
    <div class="title">
      <h3>您浏览过</h3>
      <p @click="clearAll">清空</p>
    </div>
    <!-- 产品 -->
    <div class="products">
      <div class="item" v-for="(item, index) in historyList" :key="index">
        <img :src='item.Image' />
        <div class="dis">
          <h3>{{item.RealName}}</h3>
          <!-- <div>{{item.RealId}}</div> -->
          <div class="price-del">
            <div class="price">
              <i>¥</i>
              <span>{{item.Price.toFixed(2)}}</span>
            </div>
            <div class="delete" @click="deleteItems(item.Id)">
              <img src='../../assets/img/delete.png' />
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="reach-bottom">
      已经到底了
    </div>
  </div>
</template>

<script>
import NavBar from 'components/common/NavBar'
import { getHistoryVisite, delHistoryItem, delHistoryAll } from '../../network/user'
import { Toast } from 'vant'

export default {
  components: {
    NavBar,
  },
  data() {
    return {
      userKey: localStorage.getItem('userKey'),
      historyList: [],
    }
  },
  mounted() {
    this.getHistoryVisite()
  },
  methods: {
    getHistoryVisite(){
      getHistoryVisite((listOne, list) => {
        this.historyList = listOne
        this.historyListRepeat = list
      })
    },
    deleteItems(id){
      let historyItem = this.historyList.filter(item => {
        return item.Id === id
      })
      let theSameProducts = this.historyListRepeat.filter(item => {
        return item.RealId === historyItem[0].RealId
      })
      let deleteTastList = []
      theSameProducts.map(item => {
        deleteTastList.push(this.deleteItem(item.Id))
      })
      Promise.all(deleteTastList).then(res => {
        console.log(res)
        Toast('删除成功')
        this.getHistoryVisite()
      }).catch(err => {
        console.log(err)
      })
    },
    deleteItem(id){
      return new Promise((resolve, reject) => {
        let requestData = {
          UserKey: this.userKey,
          id,
        }
        delHistoryItem(requestData, res => {
          // Toast('删除成功')
          // this.getHistoryVisite()
          resolve()
        })
      })
    },
    clearAll(){
      delHistoryAll(() => {
        Toast('已清空')
        this.getHistoryVisite()
      })
    }
  },
}
</script>

<style scoped>
.title{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  padding: 0 10px;
  line-height: 50px;
  background-color: #ffffff;
}
.title h3{
  font-size: 16px;
}
.title p{
  padding-left: 10px;
}
.products{
  overflow: hidden;
  padding-bottom: 20px;
  background-color: #ffffff;
}
.products .item{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  margin-top: 10px;
  padding: 0 10px;
}
.products .item img{
  flex-shrink: 0;
  width: 140px;
  height: 140px;
  margin-right: 10px;
}
.products .item .dis{
  flex-grow: 1;
  min-width: 100px;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.products .item .dis h3{
  font-size: 16px;
}
.products .item .dis .amount{
  flex-grow: 1;
  padding-top: 5px;
  color: #999999;
}
.products .item .dis .amount .con{
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-all;
}
.products .item .dis .price-del{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.products .item .dis .price{
  color: #d50721;
}
.products .item .dis .time{
  color: #999999;
}
.products .item .dis .price span{
  font-size: 20px;
  padding-left: 5px;
}
.products .item .dis .delete{
  width: 30px;
  height: 30px;
}
.products .item .dis .delete img{
  width: 70%;
  height: 70%;
  margin: 15%;
}
.reach-bottom{
  height: 80px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #cccccc;
  text-align: center;
}
.reach-bottom:before,
.reach-bottom:after{
  content: '';
  display: block;
  width: 10px;
  height: 1px;
  margin: 0 5px;
  background-color: #ccc;
}
</style>